<template>
    <div class="book-step-6">
        <p>诚意金支付</p>
        <div class="money">
            ￥{{money}}
        </div>
        <p>您将支付给下方设计师</p>
        <div class="app-user">
            <div class="avatar">
                <img v-if="designerInfo.headimgurl" :src="designerInfo.headimgurl" alt="">
                <img v-else src="../../../../assets/img/avatar.png" alt="">
            </div>
            <div class="name">
                {{designerInfo.userName}}
            </div>
            <div class="info">
                大咖设计师
            </div>
        </div>

        <van-button type="primary" @click="goPay">立即支付</van-button>
    </div>
</template>

<script>
import { wxPay } from '../../api/pay'
import { designerInfo } from '../../api/designer'
export default {
    props: ['orderId', 'money', 'designerId'],
    data(){
        return{
            designerInfo: {}
        }
    },
    methods: {
        goPay(){
            wxPay(this.orderId).then(rsp => {
                if(rsp.code === 200 && rsp.data){
                    this.weixinPay(rsp.data)
                }
            })
        },

        /**
         * @method :微信支付方法
         * @param data
         */
        weixinPay(data){
            var vm= this;
            if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
                    document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
                }
            }else{
                vm.onBridgeReady(data);
            }
        },
        /**
         * @method 支付费用方法
         * @param data:后台返回的支付对象,(详情微信公众号支付API中H5提交支付);
         */
        onBridgeReady(data){
            var  vm = this;
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',{
                    "appId":data.appId,     //公众号名称，由商户传入
                    "timeStamp":data.timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr":data.nonceStr, //随机串
                    "package":data.package,
                    "signType":data.signType, //微信签名方式：
                    "paySign":data.paySign //微信签名
                },
                function(res){
                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        vm.$toast.success('支付成功')
                        vm.$router.push({name: 'bookResult'});
                        if(navigator.userAgent.indexOf('iPhone')){
                            location.href = location.origin + '/#/hire/bookResult'
                        }
                    }else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        vm.$toast('取消支付')
                        return false;
                    } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                        vm.$toast.fail('支付失败')
                    }
                }
            );
        },
    },
    created(){
        // this.designerInfo = JSON.parse(localStorage.bookDesignerInfo)

        designerInfo(this.designerId).then(rsp => {
            if(rsp.code === 200 && rsp.data){
                this.designerInfo = rsp.data
            }
        })
    }
}
</script>


<style lang="less">
.book-step-6{
    padding: 50px 15px 0;
    text-align: center;
    &>p{
        font-size: 13px;
        line-height: 2;
    }
    .money{
        margin: 10px 0;
        font-size: 30px;
        font-weight: bold;
    }

    .app-user{
        .avatar{
            width: 100px;
            height: 100px;
            margin: 30px auto 10px;
            border-radius: 50%;
            overflow: hidden;
        }
        .name{
            margin: 10px auto;
            font-size: 16px;
        }
        .info{
            font-size: 12px;
            color: #707070;
        }
    }

    .van-button{
        display: block;
        width: 80%;
        margin: 100px auto 0;
        border-radius: 22px;
    }
}
</style>
